import {View, Text, StyleSheet, TouchableOpacity} from 'react-native'
import React, {Component} from 'react'
import {CheckBox} from "react-native-elements";
import styles, {border, padding} from "../../style";
import CommonRadio from "../../component/common/CommonRadio";
import {Actions} from "react-native-router-flux";
import {inject, observer} from "mobx-react/custom";
import {Store} from "../../store";
import * as _ from "lodash"
import EmptyTip from "../../component/common/EmptyTip";

interface AddressManageProps extends Store {

}

interface AddressManageState {

}

@inject("address")
@observer
export default class AddressManage extends Component<AddressManageProps, AddressManageState> {


    constructor(props: AddressManageProps) {
        super(props);
        this.props.address.getUserShippingAddress();
    }

    _renderSection() {
        const {name, phone, addressDetail} = this.props.address.userAddress;
        return !this.addressIsEmpty ? (<View>
            <View style={[padding(15, 28, 4, 28), {backgroundColor: "#fff"}]}>
                <View style={[styles.flexDirectionRowNotFlex, styles.justifyBetween, styles.centerH]}>
                    <Text style={style.bigFont}>{name}</Text>
                    <Text style={style.bigFont}>{phone}</Text>
                </View>
                <Text style={[style.normalFont, {marginVertical: 10}]}
                      numberOfLines={2}>{addressDetail}</Text>
            </View>
            <View style={[styles.flexDirectionRowNotFlex, styles.justifyBetween, styles.centerH, padding(12, 28), {
                marginTop: 1,
                backgroundColor: "#fff"
            }]}>
                <View style={[styles.flexDirectionRowNotFlex, styles.justifyBetween, styles.centerH]}>
                    <CommonRadio size={16} checked={true}/>
                    <Text style={[style.miniFont, {marginLeft: 9, color: "#15823B"}]}>设为默认</Text>
                </View>
                {/*<TouchableOpacity style={[{borderRadius: 16}, padding(5, 16), border(1, "#EDECEC")]}>*/}
                {/*<Text style={style.miniFont}>删除</Text>*/}
                {/*</TouchableOpacity>*/}
            </View>
        </View>) : <EmptyTip style={{marginTop:30}}/>
    }

    get addressIsEmpty() {
        return _.isEmpty(this.props.address.userAddress);
    }

    manageAddress = () => {
        Actions.push("AddressSetting");
    };

    render() {
        return (<View style={style.container}>
            {this._renderSection()}
            <TouchableOpacity
                style={[styles.absoluteFull, {top: null, height: 50, backgroundColor: "#629C36"}, styles.centered]}
                onPress={this.manageAddress}>
                <Text style={{fontSize: 16, color: "#fff"}}>{this.addressIsEmpty ? "新增" : "编辑"}收货地址</Text>
            </TouchableOpacity>
        </View>)
    }
}

const style = StyleSheet.create({
    container: {backgroundColor: "#F2F2F2", flex: 1},
    bigFont: {fontSize: 18, color: "#333"},
    normalFont: {fontSize: 14, color: "#6c6c6c"},
    miniFont: {fontSize: 12, color: "#999"},
});

 